// 从 react 中引入自带的 lazy 方法和 Suspense 组件
import React, { Component, lazy, Suspense } from 'react'
import { NavLink, Route, } from "react-router-dom"
import "./router.css"
import Loading from "./Loading"
// 修改路由组件的引入方式为下面的方法
const Home = lazy(() => import("./Home"))
const About = lazy(() => import("./About"))


export default class index extends Component {
    render() {
        return (
            <div>
                <div>
                    <NavLink to="/home" style={{ "marginRight": "20px" }}>Home</NavLink>
                    <NavLink to="/about">About</NavLink>
                </div>
                <hr />
                <div>
                    {/* 使用 Suspense 组件报告路由组件，fallback 属性定义等待加载期间显示的组件 */}
                    <Suspense fallback={<Loading />}>
                        <Route path="/home" component={Home} />
                        <Route path="/about" component={About} />
                    </Suspense>
                </div>
            </div>
        )
    }
}
